<template>
  <div class="icon">
    <div class="iconLi">
      <a class="icon1">
        <img class="icoimg" src="//m.360buyimg.com/mobilecms/jfs/t27232/6/1990152759/36345/95aa3889/5bf4e1eeNb8ec25de.gif.webp" alt="">
        <span>京东超市</span>
      </a>
      <a class="icon1">
        <img class="icoimg" src="//m.360buyimg.com/mobilecms/jfs/t26635/320/1832919204/11533/a2f9878a/5bee366dN1627d554.png.webp" alt="">
        <span>海囤全球</span>
      </a>
      <a class="icon1">
        <img class="icoimg" src="//m.360buyimg.com/mobilecms/jfs/t1/8385/17/3537/17895/5bd6ca67E09d23550/32d965fe9a9087a2.png.webp" alt="">
        <span>京东时尚</span>
      </a>
      <a class="icon1">
        <img class="icoimg" src="//m.360buyimg.com/mobilecms/jfs/t17725/156/1767366877/17404/f45d418b/5ad87bf0N66c5db7c.png.webp" alt="">
        <span>京东生鲜</span>
      </a>
      <a class="icon1">
        <img class="icoimg" src="//m.360buyimg.com/mobilecms/jfs/t16990/157/2001547525/17770/a7b93378/5ae01befN2494769f.png.webp" alt="">
        <span>京东到家</span>
      </a>
      <a class="icon1">
        <img class="icoimg" src="//m.360buyimg.com/mobilecms/jfs/t18454/342/2607665324/6406/273daced/5b03b74eN3541598d.png.webp" alt="">
        <span>充值缴费</span>
      </a>
      <a class="icon1">
        <img class="icoimg" src="//m.360buyimg.com/mobilecms/jfs/t22228/270/207441984/11564/88140ab7/5b03fae3N67f78fe3.png.webp" alt="">
        <span>9.9元拼</span>
      </a>
      <a class="icon1">
        <img class="icoimg" src="//m.360buyimg.com/mobilecms/jfs/t19495/200/1823004232/14065/ca00ab2c/5ad87cf5N4ad8e6f1.png.webp" alt="">
        <span>领券</span>
      </a>
      <a class="icon1">
        <img class="icoimg" src="//m.360buyimg.com/mobilecms/jfs/t16828/63/2653634926/5662/d18f6fa1/5b03b779N5c0b196f.png.webp" alt="">
        <span>赚钱</span>
      </a>
      <a class="icon1">
        <img class="icoimg" src="//m.360buyimg.com/mobilecms/jfs/t21481/263/412160889/15938/4246b4f8/5b0cea29N8fb2865f.png.webp" alt="">
        <span>全部</span>
      </a>
    </div>
    <div class="newsl" ref="newsdiv">
      <img class="newi" src="//m.360buyimg.com/mobilecms/jfs/t14752/82/2574581467/6535/c8158ace/5aa8935bN94e31ff6.jpg.dpg" alt="">
      <div class="newsli">
        <ul :style="{marginTop: mt30 + 'px' }">
          <li class="lia">iPhone XR大放血已变成小米价，再次被疯抢</li>
          <li class="lia">小米9要来了!8150+10g+5000mh</li>
          <li class="lia">石墨烯用上瘾？锂电池要说拜拜？</li>
          <li class="lia">AMD散片为什么这么少？遇上了可千万别错过</li>
        </ul>
      </div>
      <span class="more">更多</span>
    </div>
    <div class="cupon">
      <a class="w50"><img src="//m.360buyimg.com/mobilecms/jfs/t22669/2/1068468129/61215/94ecd235/5b4ef440N90d4cec0.jpg!q70.jpg.dpg" alt=""></a>
      <a class="w25"><img src="//m.360buyimg.com/mobilecms/jfs/t22744/121/2371533236/38175/57e9c4c0/5b7d15f8N6dcc1499.jpg!q70.jpg.dpg" alt=""></a>
      <a class="w25"><img src="//m.360buyimg.com/mobilecms/jfs/t22876/289/1260100934/110456/a7972b81/5b5941f0Ncf55eacb.jpg!q70.jpg.dpg" alt=""></a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeIcon',
  data () {
    return {
      mt30: -23,
      timer: false
    }
  },
  mounted () {
    this.move()
  },
  methods: {
    move () {
      this.timer = setInterval(() => {
        // this.mt30 = this.mt30 - 23
      }, 5000)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .icon
    border-radius 12px
    margin-top -8px
    background #fff
    position relative
    z-index 10
    width 100%
    .iconLi
      font-size 0
      .icon1
        width 20%
        text-align center
        display inline-block
        margin-top .2rem
        .icoimg
          width .8rem
      .icon1 span
        font-size .24rem
        display block
        margin-top .15rem
        color #666
    .newsl
      margin-top .3rem
      height .5rem
      overflow hidden
      position relative
      // border 1px solid #ccc
      .newi
        height .33rem;
        width 1.45rem;
        margin-left .3rem
        position absolute
        margin-top .04rem
      .newsli
        font-size .24rem
        padding 0 1.2rem 0 1.9rem
      .newsli ul
        // border 1px solid red
        .lia
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
          margin .1rem 0 .2rem 0
      .more
        position absolute
        right 0
        top .1rem
        font-size .24rem
        width 1rem
        text-align center
        border-left 1px solid #ccc
    .cupon
      font-size 0
      margin-top .2rem
      .w50
        width 50%
        display inline-block
      .w50 img
        width 100%
      .w25
        width 25%
        display inline-block
      .w25 img
        width 100%
</style>
